<template>
    <div class="wscn-http404-container" @click="$router.push('/')">
        <img v-if="showImg" class="main-img" src="@/assets/imgs/404.png" alt="">
        <video v-else ref="mainVideo" class="main-bg" src="@/assets/media/404.mp4" autoplay loop muted />
    </div>
</template>

<script>

export default {
    name: 'Page404',
    data: function() {
        return {
            showImg: false
        }
    },
    mounted() {
        console.log('错误页面', this.$route.redirectedFrom);
        this.$refs.mainVideo.play().catch(() => {
            this.showImg = true;
        })
    }
}
</script>

<style lang="scss" scoped>
.wscn-http404-container{
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.main-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
}
.main-bg{
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: screen;
}
</style>
